import React from 'react';
import { TabBar } from 'antd-mobile';

import { Route } from "react-router-dom";

/* 
home 里面 三个小页面
首页
找房
我的
 */

import Index from "../index";
import Found from "../found";
import My from "../my";

class Home extends React.Component {
  render() {
    const { location } = this.props;
    return (
      <div style={{ position: 'fixed', height: '100%', width: '100%', top: 0 }}>
        <TabBar
          unselectedTintColor="#949494"
          tintColor="#28ba85"
          barTintColor="white"
        >
          <TabBar.Item
            title="首页"
            key="Index"
            icon={<i className="iconfont icon-ind" style={{ fontSize: "18px" }}  ></i>}
            selectedIcon={<i className="iconfont icon-ind" style={{ color: "#28ba85", fontSize: "18px" }}  ></i>}
            selected={location.pathname === '/home/index'}
            onPress={() => {
              this.props.history.push("/home/index")

            }}
            data-seed="logId"
          >
            <Route path="/home/index" component={Index} />
          </TabBar.Item>
          <TabBar.Item
            icon={<i className="iconfont icon-findHouse" style={{ fontSize: "18px" }}  ></i>}
            selectedIcon={<i className="iconfont icon-findHouse" style={{ color: "#28ba85", fontSize: "18px" }}  ></i>}
            title="找房"
            key="Found"
            selected={location.pathname === '/home/found'}
            onPress={() => {
              this.props.history.push("/home/found")
            }}
          >
            <Route path="/home/found" component={Found} />
          </TabBar.Item>
          <TabBar.Item
            icon={<i className="iconfont icon-my" style={{ fontSize: "18px" }}  ></i>}
            selectedIcon={<i className="iconfont icon-my" style={{ color: "#28ba85", fontSize: "18px" }}  ></i>}
            title="我的"
            key="My"
            selected={location.pathname === '/home/my'}
            onPress={() => {
              this.props.history.push("/home/my")
            }}
          >
            <Route path="/home/my" component={My} />
          </TabBar.Item>
        </TabBar>
      </div>
    );
  }
}

export default Home;